<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}">
			<image class="back-img" src="/static/close1.png" @click="back()"></image>
			<text class="page-title">我的位置</text>
		</view>
		<scroll-view scroll-y="true" class="location-list" :style="{'height': `calc(100% - ${safeTop}px - 86rpx)`}">
			<view class="search-box">
				<image class="search-img" src="/static/searchPic.png"></image>
				<input placeholder="搜索地点名称" @input="searchPoi"/>
			</view>
			<view class="location-item" v-for="(location, index) of locationList" @click="chooseLocation(location)">
				<view class="line" v-if="index !== 0"></view>
				<view class="location-text">{{ location }}</view>
			</view>
			<view :style="{'height': safeBottom + 'px'}"></view>
		</scroll-view>
	</view>
</template>

<script>
	const mapSearch = weex.requireModule('mapSearch');

	export default {
		data() {
			return {
				locationList: ['不显示位置'],
				pageNum: 1,
				location: {},
				safeBottom: 0,
				safeTop: 0
			};
		},
		onLoad() {
			this.safeBottom = this.$safeBottom;
			this.safeTop = this.$safeTop;
			this.getMyLocation();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			getMyLocation() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						this.location = res;
						mapSearch.poiSearchNearBy({
						    point: {
						        latitude: res.latitude,
						        longitude: res.longitude
						    },
						    key: '',
						    radius: 1000,
							offset: 25,
							index: this.pageNum
						}, ret => {
						    ret.poiList.forEach(item => {
								let place = item.name.replace(new RegExp(/(\\)/g), '');
								this.locationList.push(place);
							});
						})
					}
				})
			},
			searchPoi(e) {
				uni.showLoading({
					title: '搜索中...',
					mask: true
				});
				mapSearch.poiSearchNearBy({
				    point: {
				        latitude: this.location.latitude,
				        longitude: this.location.longitude
				    },
				    key: e.detail.value,
				    radius: 1000,
					offset: 25,
					index: this.pageNum
				}, ret => {
					uni.hideLoading();
					this.locationList = ['不显示位置'];
				    ret.poiList.forEach(item => {
						let place = item.name.replace(new RegExp(/(\\)/g), '');
						this.locationList.push(place);
					});
				})
			},
			chooseLocation(location) {
				uni.navigateBack();
				uni.$emit('chooseLocation', location);
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		overflow: hidden;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.back-img {
				width: 36rpx;
				height: 36rpx;
				margin-left: 42rpx;
				z-index: 999;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}
		}

		.location-list {
			width: 100vw;
			
			.search-box {
				width: 686rpx;
				height: 80rpx;
				background: #F6F7F9;
				border-radius: 20rpx;
				margin-left: 32rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 40rpx;
				margin-bottom: 30rpx;
			
				.search-img {
					width: 32rpx;
					height: 32rpx;
					margin: 0 22rpx 0 22rpx;
				}
			
				.search-input {
					width: 600rpx;
				}
			}
			
			.location-item {
				width: calc(100vw - 96rpx);
				padding: 0 48rpx 0 48rpx;
				height: 96rpx;
				
				.line {
					width: 654rpx;
					height: 2rpx;
					background: #F0F3F6;
				}
				
				.location-text {
					width: 100%;
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					line-height: 96rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>
